<template>
   <div class="FileManageContainer">
       <div name="FileManageTop" class="top">
           <Breadcrumb>
               <BreadcrumbItem to="/">Home</BreadcrumbItem>
               <BreadcrumbItem to="/components/breadcrumb">Components</BreadcrumbItem>
               <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
           </Breadcrumb>
       </div>
       <div name="FileManageMain" class="main">
           <Split v-model="split1">
               <div slot="left" >
                   <div name="leftPane" class="leftPane">
                       <Tree :data="dir" :load-data="loadData"></Tree>
                   </div>
               </div>
               <div slot="right" class="demo-split-pane">
                   <div name="rightPane" class="rightPane">
                       <div style="height:3000px"></div>
                   </div>
               </div>
           </Split>
       </div>

   </div>
</template>

<script>
    import AppFrame from "../../libs/app-frame";
    export default {
        name: "file-manage",
        data(){
            return{
                split1: 0.2,
                allFile: [],
                dir:[],
                path:'/',
                ext:'',
                isCurDir:0
            }
        },
        computed:{

        },
        created(){
            this.getData(this.path);
        },
        mounted(){
            this.$store.state.PageMainContentPadding = "0px";
            this.fixMainContainerHeight();


        },
        methods:{
            //搞定左边高度
            fixMainContainerHeight(){
                $("[name='FileManageMain']").height($("#PageContent").height()-32);
                this.$store.state.MsgBus.$on("PageOnReSize", (win)=> {
                    $("[name='FileManageMain']").height(win.MainHeight-32);
                });
                this.fixFileManageContainerSlimScroll();
            },
            fixFileManageContainerSlimScroll() {
                let ContentHeight = $("[name='FileManageMain']").height();
                $("[name='leftPane']").slimScroll({
                    height: ContentHeight,
                    alwaysVisible: false,
                    allowPageScroll: false,
                    touchScrollStep: 200,
                    color: "#999",
                    size: "5px",
                    distance: "2px"
                });
                $("[name='rightPane']").slimScroll({
                    height: ContentHeight,
                    alwaysVisible: false,
                    allowPageScroll: false,
                    touchScrollStep: 200,
                    color: "#999",
                    size: "5px",
                    distance: "2px"
                });
            },
            getDir(data){
                return data.filter(item=>{
                    return item.title.indexOf('.')===-1;
                })
            },
            getData(rootPath){
                let self=this;
                AppFrame.Http.Post("/manage-api/system/file/getItems",{rootPath:rootPath,isCurDir:this.isCurDir}).then(function (ret) {
                    if(ret && ret.Result===1){
                        self.allFile=ret.Data;
                        self.dir=self.getDir(self.allFile);
                        console.log(ret.Data);
                    }
                }).catch(function(err) {
                    console.log(err);
                    self.$Message.error(JSON.stringify(err));
                });
            },
            loadData (item, callback) {
                item.loading = true;
                let self=this;
                let postData={rootPath:item.path,ext:self.ext};
                AppFrame.Http.Post("/manage-api/system/file/getItems",postData).then(function (ret) {

                    item.loading = false;

                    if(ret && ret.Result===1){
                        item.children=self.getDir(ret.Data);
                        callback(self.getDir(ret.Data));
                    }

                }).catch(function(err) {
                    this.$Message.error(JSON.stringify(err));
                    callback();
                });

            },
        },
        destroyed(){
            this.$store.state.PageMainContentPadding = "10px";
        }
    }
</script>

<style scoped>
    .FileManageContainer{}
.FileManageContainer > .top{line-height: 30px;border-bottom: 1px solid #c0c0c0;padding: 0px 10px}
    .FileManageContainer > .main{}
    .leftPane{padding: 0px 10px}
</style>